<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background: #eee;
			}
			
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="1000"></canvas>
		<img id='thumb' src="avatar.jpg" style="display: none;">
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas');
			var ctx = canvas.getContext('2d');
			// x,y,w,h
			// 设置填充颜色
			ctx.fillStyle='red'
			
			//绘制填充矩形
			ctx.fillRect(50,50,100,100)
			// 设置线条颜色
			ctx.strokeStyle='blue'
			// 设置线宽
			ctx.lineWidth=5
			// 设置线的连接样式round（圆角）|bevel(斜切)
			ctx.lineJoin='round'
			// 绘制线框矩形
			ctx.strokeRect(70,70,100,100)
			// 线 save->restore 里面得样式只再内部起作用
			ctx.save()
				ctx.strokeStyle='gold'
				ctx.fillStyle='goldenrod'
				ctx.lineWidth=10;
				// 开始绘制
				ctx.beginPath();
				ctx.moveTo(50,250)
				ctx.lineTo(200,300)
				ctx.lineTo(260,260)
				// 闭合
				ctx.closePath()
				ctx.stroke();
				ctx.fill();
			ctx.restore()
			// 
			ctx.beginPath();
			ctx.moveTo(50,350)
			ctx.lineTo(200,400)
			ctx.lineTo(260,360)
			ctx.closePath()
			ctx.fillStyle='blue'
			ctx.fill();
			// 
			ctx.beginPath();
			ctx.moveTo(50,450)
			ctx.lineTo(200,500)
			ctx.lineWidth=20
			// 线得端点样式 round(圆角)|默认|线宽一半
			ctx.lineCap='round'
			ctx.shadowBlur=15
			ctx.shadowColor='black'
			ctx.shadowOffsetX=10
			ctx.shadowOffsetY=10
			ctx.closePath()
			ctx.stroke();
			// 空心圆
			ctx.save()
			ctx.beginPath();
			ctx.lineWidth=2;
			ctx.moveTo(300,300)
			// x,y,r,起始角度,结束角度,方向(flase|true)
			//角度=弧度*Math.PI/180
			ctx.arc(300,300,50,0,270*Math.PI/180,false)
			ctx.stroke()
			ctx.restore()
			// 实心圆
			ctx.save()
			ctx.beginPath();
			ctx.lineWidth=2;
			ctx.moveTo(400,300)
			ctx.arc(400,300,50,0,180*Math.PI/180,true)
			ctx.fill()
			ctx.restore()
			// 绘制实心文本
			ctx.font='30px Arial'
			ctx.save()
			ctx.fillText('Hello Canvas',300,40)
			ctx.restore()
			// 绘制线条文本
			ctx.lineWidth=1
			ctx.strokeText('Hello Canvas',300,80)
			// 绘制图片
			let thumb = document.querySelector('#thumb')
			thumb.onload=function(){
				// 图片对象,x,y,w,h
				ctx.drawImage(thumb,300,400,100,100)
				// 显示部分区域的图片   // 图片对象,sx,sy,sw,sh,x,y,w,h
				ctx.drawImage(thumb,150,110,50,50,450,400,100,100)
			}
			// 像素操作
			var imgData = ctx.getImageData(0,0,350,200)
			ctx.putImageData(imgData,220,530)
		</script>
	</body>
</html>
